<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">视频监控管理平台</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                摄像头管理 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">添加摄像头</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                    </ul>
                </div>
            </div>

        </nav>
        <div id="message" style="position:absolute;right:50px;top:80px;width:250px;background:pink;height:300px;overflow-y:scroll" ></div>
        <div class="row" id="cam_list">
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        视频监控
                    </h4>
                </div>
                <div class="modal-body">
                    <img id="real_cam" alt="" style="height: 300px;width: 100%;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        function get_video(camera_id) {
            $('#real_cam').attr('src', '/monitor/real?uid=' + camera_id)
        }
        $(function () {
            $('#myModal').on('hide.bs.modal', function () {
                $('#real_cam').attr('src', '')
            })
        });
        $(function () {
             var ws = new WebSocket("ws://127.0.0.1:8001/ws/notice");
             var html = '';
             ws.onmessage = function (data) {
                 var data = JSON.parse(data.data);
                 html += data.message + ' ' + data.time + '<br>';
                 $("#message").html(html);

             }
            $.get('/monitor/camera_list', function (data) {
                var camList=data.data;
                console.log(camList)
                var html='';
                camList.forEach(element => {
                    html+=
                    "<div style='width:230px;float:left;margin-left:20px'>"+
                        "<div class='thumbnail'>"+
                            "<div class='caption'>"+
                                "<p>名称："+element.name+"</p>"+
                                "<p>位置："+element.position+"</p>"+
                                "<p>状态："+element.is_active+"</p>"+
                                    "<a href='#' class='btn btn-primary' role='button' data-toggle='modal' data-target='#myModal' onclick=get_video('"+element.uid+"')>" +
                        "查看监控<img src='http://127.0.0.1:8000/monitor/video_feed/"+ element.uid+"'></a>"+
                                "</p>"+
                            "</div>"+
                        "</div>"+
                    "</div>"
                });
                $("#cam_list").html(html);
            });
        })
    </script>
</body>

</html>